<template>
	<view class="xzfx-car-list">
		<view class="xzfx-car-item" v-for="(item,index) in list" :key="index" @click.stop="$go('/pages/car-sale/details?id=' + item.id)">
			<image v-if="item.photos" :src="item.photos.split(',')[0]" mode=""></image>
			<view v-else class="image"></view>
			<view class="car-info">
				<view class="car-title">
					{{ item.truckBrand || "" }}
					{{ item.truckType || "" }}
				</view>
				<view class="car-parmas">
					<view class="car-parmas-item">{{ item.maxPower || "" }}匹</view>
					<view class="car-parmas-item">{{ item.fuelType || "" }}</view>
					<view class="car-parmas-item">{{ item.emissionStandard || "" }}</view>
				</view>
				<view class="car-action">
					<view class="car-price">
						{{ item.quotePrice }}
						<text>万元</text>
					</view>
					<view v-if="item.personalStatus === '个人车源'" class="car-source" style="background-color: #4cd964;">
						{{ item.personalStatus }}
					</view>
					<view v-if="item.personalStatus === '平台车源'" class="car-source" style="background-color: #f56d9d;">
						{{ item.personalStatus }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"xzfx-car-list",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		}
	}
</script>

<style scoped lang="scss">
	.xzfx-car-list{
		.xzfx-car-item{
			display: flex;
			justify-content: space-between;
			margin-top: $xzfx-spacing;
			background-color: #fff;
			padding: $xzfx-spacing;
			border-radius: 20rpx;
			image, .image{
				width: 270rpx;
				height: 180rpx;
				border-radius: 20rpx;
			}
			.car-info{
				width: calc(100% - 290rpx);
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				.car-title{
					font-size: 30rpx;
					line-height: 36rpx;
					font-weight: bold;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.car-parmas{
					display: flex;
					align-items: center;
					.car-parmas-item{
						font-size: 28rpx;
						color: #999999;
						margin-right: $xzfx-spacing;
					}
				}
				.car-action{
					margin-top: 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.car-price{
						height: 46rpx;
						font-size: 42rpx;
						font-weight: bold;
						color: red;
						text{
							font-size: 28rpx;
							margin-left: 5rpx;
						}
					}
					.car-source{
						height: 44rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 24rpx;
						border-radius: 10rpx;
						color: #fff;
						padding: 0 15rpx;
					}
				}
			}
		}
	}
</style>